<template>
    <div id="ChartProportion" ref="chartDom" class="br-5"></div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
const chartDom = ref(0)
const clientWidth = document.body.clientWidth

onMounted(() => {

    $api.getBrandList().then(res => {
        /** @type EChartsOption */
        let option = {
            textStyle: {
                fontFamily: 'Dosis',
            },
            tooltip: {
                trigger: 'item',
            },
            title: {
                show: true,
                // top: '',
                text: `Sales\nProportion`,
            },
            legend: {
                top: '50',
                left: 'auto',
                show: clientWidth >= 768 ? true : false,
                orient: 'vertical'
            },
            series: [
                {
                    type: 'pie',
                    left: '110',
                    radius: clientWidth >= 768 ? '88%' : '100%',
                    label: {
                        position: 'inner',
                    },
                    data: res.splice(0, 6).map(item => {
                        return { value: item.total, name: item.brand }
                    })
                }
            ]
        }
        const CHART = $echarts.init(chartDom.value)
        CHART.setOption(option)
    })

})

</script>
<style lang='less' scoped>
#ChartProportion {
    height: 100%;
    padding: 20px;
    background-color: var(--bgColor2);
}
</style>
